@import url("../../fonts/HelveticaNeue/style.css");
@import url("../../fonts/Pacifico/style.css");
@import url("../../fonts/BebasNeue/style.css");
@import url("../../fonts/League Gothic/style.css");
@import url("../../fonts/Roboto/style.css");


.article{
    display:flex;
    flex-direction: column;
}
#list{
    position:relative;
    width:100%;
    min-height:30em;
    display:grid;
    justify-content:center;
    align-content:center;
    grid-template-rows:1fr auto;
    place-items:center;
	background:url('../img/background.svg') repeat;
}
#mList{
    position:relative;
    display:grid;
    justify-content:center;
    align-content:center;
    grid-template-columns:auto auto;
    grid-column-gap:40vw;
    place-items:center;
}
#enlist{
    display:flex;
    flex-direction: column;
    justify-content:center;
    position:relative;
    color:#f3f3f3;
    width:25vw;
    min-height:15vw;
    text-align:center;
}
#enlist>h2{
    font-family: "League Gothic";
    font-size:calc(2vw + 1em);
    font-weight:normal;
}
#enlist>p{
    font-family: "Roboto";
    font-size:calc(0.5vw + 1em);
}
#enlist>.blockMon{
    margin-top:1em;
    overflow:auto hidden;
    padding:0.2em;
    margin-bottom:1em;
    background-color: #4f4e4e;
    border: 1px solid #ddd;
    text-align: left;
}
#enlist>.blockMon>pre{
    font-family: "Roboto";
    font-size:calc(0.5vw + 1em);
    color: #ffffff;
}
#monitor{
    position: relative;
    display:grid;
    grid-template-columns: repeat(4,1fr);
    grid-gap:20px;
    grid-auto-columns: minmax(2vw,auto);
    grid-auto-rows: 2rem;
    align-items: center;
    justify-content: center;
}
#monitor>.block{
    position:relative;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content: center;
    height:2em;
    background-color:#837D7D;
    border:1px solid black;
    box-sizing: border-box;
    border-radius: 10px;
}
#monitor>.block:hover{
    background-color: #a89b9b;
    cursor: pointer;
}
#nextBut{
    display:none;
    position:relative;
    margin:10px 50%;
    flex-direction: row;
}
#nextBut>#sel{margin-right:2em;}
#nextBut>input[type="submit"]{
    width:7.5em;
    background-color:transparent;
    color:#fff;
    border-radius: 50px;
    font-size:1.2em;
}
#nextBut>input[type="submit"]:hover{
    cursor: pointer;
    background: linear-gradient(270deg, #ff9898, #ff9400, #ffcd00);
    background-size: 600% 600%;
    animation:background 3s ease infinite;
}
#NextBtn{display:none;}
.navMon>form{
    display:grid;
    grid-template-rows: auto auto;
    grid-gap:5px;
}
.navMon>form>.CodeBlock{
    min-height:30vh;
    min-width:20vw;
    padding:0.2em;
    background-color: #4f4e4e;
    border: 1px solid #ddd;
    text-align: left;
    font-family: "Roboto";
    font-size:calc(0.5vw + 0.7em);
    color: #ffffff;
    resize:none;
    overflow: auto;
}
.navMon>form>.SubCode{
    width:7.5em;
    background-color:transparent;
    color:#fff;
    border-radius: 50px;
    font-size:1.2em;
    place-self:center;
}
.blockArt{
    margin:2vh 25vw;
}
.blockArt>.block{
    display:flex;
    flex-direction:column;
    margin: 5vh 0;
}
.blockArt>.block>h2{
    font-family:'League Gothic';
    margin:0 auto 1em;
    font-size:1.5em;
}
.blockArt>.block>.inblock{
    display:flex;
    flex-direction:row;
    align-items:center;
}
.blockArt>.block>.inblock>img{
    width:15vw;
}
.blockArt>.block>.inblock>span{
    font-family:'Roboto';
    margin:2em;
    font-size:1.2em;
}
.navMon>form>.SubCode:hover{
    cursor: pointer;
    background: linear-gradient(270deg, #ff9898, #ff9400, #ffcd00);
    background-size: 600% 600%;
    animation:background 3s ease infinite;
}
@keyframes background {
    0%{background-position:0% 50%}
    50%{background-position:100% 51%}
    100%{background-position:0% 50%}
}

@media screen and (max-width: 75em){
    #monitor{
        grid-template-columns: repeat(2,1fr);
    }
}
@media screen and (max-width: 68.75em) {
    #mList{
        grid-template-rows: auto 1fr;
        grid-template-columns: auto;
        grid-gap: 10px;
    }
	.blockArt>.block>.inblock>img{
		width:7.5em;
	}
}
@media screen and (max-width:34.375em) {
    #mList{
        grid-column-gap: 10vw;
    }
    .blockArt{
        margin:2vh 15vw;
    }
    .blockArt>.block>.inblock img{
        width:6.5em;
    }
    .blockArt>.block>.inblock>span{
        margin:0;
    }
}
@media screen and (max-width:37.5em){
    #monitor{
        display:none;
    }
    #nextBut{
        display:flex;
    }
    #enlist{
        width:55vw;
    }
}
@media screen and (max-width:25em){
    .blockArt>.block>.inblock{
        flex-direction: column;
    }
}